<template>
  <el-container class="home-el-container">
    <el-header class="home-el-header">
      <el-row>
        <el-col :span="8">
          <!-- 首页图标 -->
          <el-tabs style="align-items: center" @tab-click="tabChange">
            <!-- 搜索nav :使用导航页替代下面方案 -->
            <el-tab-pane label="首页" :push="HomeTabEnum.home.pushUrl" />
            <el-tab-pane label="我关注的" :push="HomeTabEnum.interested.pushUrl" />
            <!-- 变好: 该模块旨在帮助客户改善自己,通过自控力的提升,仅发布官方内容? -->
            <el-tab-pane label="变好" :push="HomeTabEnum.beWell.pushUrl" />
            <el-tab-pane label="工具" :push="HomeTabEnum.ssq.pushUrl" />
          </el-tabs>
        </el-col>
        <el-col :span="8">
          <el-input style="width: 50%" />
          <el-button icon="el-icon-search" circle></el-button>
        </el-col>
        <el-col :span="8">
          <!--todo 点击编辑文章: 待选:1.Drawer 抽屉 2.Dialog 对话框-->
          <!--todo badmainlist 可用InfiniteScroll 无限滚动做外层框架? -->
          <el-button type="primary" icon="el-icon-edit" @click="showEdit =true" circle>惨</el-button>&nbsp;&nbsp;
          <el-badge :value="3" class="item">
            <el-button type="info" icon="el-icon-message" circle></el-button>&nbsp;&nbsp;
          </el-badge>
          <el-avatar
            shape="square"
            :size="`big`"
            :src="`https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png`"
          ></el-avatar>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="home-el-main">
      <router-view />
    </el-main>
    <el-dialog
      class="artcle-dialog"
      title="下面后期使用富文本"
      :visible.sync="showEdit"
      :modal="false"
      :close-on-click-modal="false"
      width="60%"
      center
      v-dialogCanMove
    >
      <!-- 写:model="formComponents"才会让rules正确生效,否则一直校验不通过 -->
      <el-form style="height: 600px" :rules="artcleRules" :model="formComponents">
        <el-form-item label="标题:" prop="title">
          <el-input type="text" v-model="formComponents.title" />
        </el-form-item>
        <el-form-item label="内容:" prop="content">
          <el-input type="textarea" v-model="formComponents.content" :rows="20"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="submitArticle">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { save } from "./env/service";
import { HomeTabEnum } from "./common/HomeTabEnum";

export default {
  name: "homePage",
  data() {
    return {
      HomeTabEnum,
      showEdit: false, // 是否展示
      badList: [],
      formComponents: {
        title: "",
        content: ""
      },
      artcleRules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
          {
            min: 1,
            max: 3000,
            message: "你写小说呢? 最大支持 3000 个字符!",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    //this.test();
  },
  created() {
    //this.getPage();
  },
  methods: {
    // 首页 tab 切换触发
    tabChange(tab, event) {
      console.log(tab);
      console.log(tab.$attrs.push);
      this.$router.push(tab.$attrs.push);
    },
    // 提交文章
    submitArticle() {
      const _this = this;
      const title = this.formComponents.title;
      const content = this.formComponents.content;
      save({ content: content, title: title }, "提交文章", function (res) {
        console.log(res);
        if (res.status == 'SUCCESS') {
          _this.$message.success("保存成功");
        }
        _this.showEdit = false;
      });
    }
  }
};
</script>

<style>
.artcle-dialog {
  background-color: #b3c0d1;
}

.home-el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  /*margin控制四边留白,以次是:上右下左*/
  margin: 0px 10% 0px 10%;
}

.home-el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  margin: 0px 10% 0px 10%;
}

body > .home-el-container {
  margin-bottom: 40px;
}
</style>
